import * as echarts from '../ec-canvas/echarts.js';

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    },
    charts: [],
    end: "",
    dates: [{
      label: '当天',
      value: 1
    }, {
      label: '7天',
      value: 7
    }, {
      label: '30天',
      value: 30
    }],
    dateIndex: 2,
    types: [{
      label: "默认",
      value: 0
    }, {
      label: "设备",
      value: 1
    }],
    typeIndex: 0
  },

  ready() {
    this.setData({
      end: this.getDateStr(new Date())
    });
    this.ecComponent = this.selectComponent('.ec-charts');
    getApp().waitLogin.then(data => {
      this.getCharts();
    });
  },

  /**
   * 组件的方法列表
   */
  methods: {
    getCharts() {
      let end = new Date(this.data.end);
      end.setDate(end.getDate() - this.data.dates[this.data.dateIndex].value);
      wx.$http.get("/api/liuliang/charts", {
        START: this.getDateStr(end),
        END: this.data.end
      }).then(({
        data: res
      }) => {
        this.setData({
          charts: res.result
        }, () => {
          this.initCharts();
        });
      }).catch(() => {});
    },
    initCharts() {
      let xData = [];
      let yData = this.data.typeIndex === 0 ? [] : [
        [],
        [],
        []
      ];
      let ySeries = this.data.typeIndex === 0 ? [] : [
        [],
        [],
        []
      ];
      this.data.charts.forEach(item => {
        let date = item.ZK_TIME.split(" ")[0];
        let hour = new Date(item.ZK_TIME).getHours() + "时";
        let isandroid = item.ZK_AGENT.toLowerCase().indexOf("android") > -1;
        let isiphone = item.ZK_AGENT.toLowerCase().indexOf("iphone") > -1;
        if (this.data.typeIndex === 0) {
          //不分类设备
          if (this.data.dateIndex === 0) {
            //按小时分
            if (!xData.includes(hour)) {
              xData.push(hour);
              yData.push(0);
            }
            let index = xData.indexOf(hour);
            yData[index] = yData[index] + 1;
          } else {
            //按日期分
            if (!xData.includes(date)) {
              xData.push(date);
              yData.push(0);
            }
            let index = xData.indexOf(date);
            yData[index] = yData[index] + 1;
          }
        } else {
          //按设备分类
          if (this.data.dateIndex === 0) {
            //按小时分
            if (!xData.includes(hour)) {
              xData.push(hour);
              yData[0].push(0);
              yData[1].push(0);
              yData[2].push(0);
            }
            let index = xData.indexOf(hour);
            if (isandroid) {
              yData[0][index] = yData[0][index] + 1;
            } else if (isiphone) {
              yData[1][index] = yData[1][index] + 1;
            } else {
              yData[2][index] = yData[2][index] + 1;
            }
          } else {
            //按日期分
            if (!xData.includes(date)) {
              xData.push(date);
              yData[0].push(0);
              yData[1].push(0);
              yData[2].push(0);
            }
            let index = xData.indexOf(date);
            if (isandroid) {
              yData[0][index] = yData[0][index] + 1;
            } else if (isiphone) {
              yData[1][index] = yData[1][index] + 1;
            } else {
              yData[2][index] = yData[2][index] + 1;
            }
          }
        }
      });
      if (this.data.typeIndex === 0) {
        ySeries[0] = {
          name: '访问量',
          type: 'line',
          smooth: true,
          data: yData
        };
      } else {
        ySeries[0] = {
          name: '安卓',
          type: 'line',
          smooth: true,
          data: yData[0]
        };
        ySeries[1] = {
          name: '苹果',
          type: 'line',
          smooth: true,
          data: yData[1]
        };
        ySeries[2] = {
          name: 'PC',
          type: 'line',
          smooth: true,
          data: yData[2]
        };
      }
      this.ecComponent.init((canvas, width, height) => {
        let chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
        let option = {
          legend: {
            left: 'center',
          },
          grid: {
            containLabel: true,
            x: 12,
            y: 30,
            x2: 12,
            y2: 20
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData,
          },
          yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: ySeries
        };
        chart.setOption(option);
        this.chart = chart;
        return chart;
      });
    },
    endChange(e) {
      this.setData({
        end: e.detail.value
      }, () => {
        this.getCharts();
      });
    },
    dateChange(e) {
      this.setData({
        dateIndex: e.detail.value
      }, () => {
        this.getCharts();
      });
    },
    typeChange(e) {
      this.setData({
        typeIndex: Number.parseInt(e.detail.value)
      }, () => {
        this.initCharts();
      });
    },
    getDateStr(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day
    }
  }
})